<template>
  <div>
    <div class="singerList">
      <van-index-bar :index-list="indexList" :sticky-offset-top="0">
        <!-- 热门歌手 -->
        <van-index-anchor index="热">热门歌手</van-index-anchor>
        <div
          v-for="(item, index) in hotlist"
          :key="index"
          @click="goMusicllist(item.id, item.name, item.img1v1Url)"
        >
          <li>
            <img :src="item.img1v1Url" alt="" />
            <div>{{ item.name }}</div>
          </li>
        </div>
        <!-- 歌手分类列表 -->
        <div v-for="(item, index) in classify" :key="index">
          <van-index-anchor :index="index"></van-index-anchor>
          <li
            v-for="(k, i) in item"
            :key="i"
            @click="goMusicllist(k.id, k.name)"
          >
            <!-- <img :src="k.img1v1Url" alt="" /> -->
            <img alt="" />
            <div>{{ k.name }}</div>
          </li>
        </div>
      </van-index-bar>
    </div>
     <van-overlay :show="show">
      <div class="wrapper" @click.stop>
        <van-loading type="spinner" />
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { getSinger, gethot } from "../api/singer.js";
export default {
  data() {
    return {
      list: "",
      classify: {
        A: [],
        B: [],
        C: [],
        D: [],
        E: [],
        F: [],
        G: [],
        H: [],
        I: [],
        J: [],
        K: [],
        L: [],
        M: [],
        N: [],
        O: [],
        P: [],
        Q: [],
        R: [],
        S: [],
        T: [],
        U: [],
        V: [],
        W: [],
        X: [],
        Y: [],
        Z: [],
      },
      hotlist: "",
      indexList: [
        "热",
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
      ],
      show:true,
    };
  },
  methods: {
    goMusicllist(id, name, img) {
      this.$router.push({
        path: "/singer/musiclist",
        query: { id, name, img },
      });
      
    },
  },
  created() {
    for (let key in this.classify) {
      getSinger({ initial: key, limit: 5, area: 7 }).then((data) => {
        if (data.code == 200) {
          this.classify[key] = data.artists;
        }
      });
    }

    // 获取热门歌手 10
    gethot({ limit: 10 }).then((data) => {
      if (data.code == 200) {
        this.show = false;
        this.hotlist = data.artists;
      }
    });
  },
};
</script>

<style lang="less">
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.singerList {
  height: 100vh;
  margin: 0;
  // padding: 10px;
  .van-index-bar {
    height: 100%;
  }
  li {
    display: flex;
    height: 1.25rem;
    padding: 0.125rem 0.1875rem;
    border-bottom: 1px solid #ccc;
    background-color: #f2f3f4;
    img {
      width: 1.25rem;
      height: 1.25rem;
      border-radius: 5px;
    }
    div {
      height: 100%;
      flex: 1;
      line-height: 1.25rem;
      text-indent: 1.2em;
      font-size: 3.5vw;
    }
  }
}
.van-index-anchor {
  color: white;
  font-weight: bolder;
  background-color: #dadbdc;
}
.van-index-bar__sidebar {
  top: 55%;
  span {
    margin-bottom: 5px;
  }
}
</style>